<!DOCTYPE html>
<html>
<head>
  <title>vue</title>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://cn.vuejs.org/js/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>空智个人信息情况: {{ basicMsg }}</p>
    <p>空智今年的年龄: <input type="text" v-model="obj.age" /></p>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        obj: {
          basicMsg: '',
          age: 31,
          single: '单身'
        }
      },
      watch: {
        'obj': {
          handler(newVal, oldVal) {
              console.log(111)
            this.basicMsg = '今年' + newVal.age + '岁' + ' ' + this.obj.single;
          },
          immediate: true,
          deep: true // 需要添加deep为true即可对obj进行深度监听
        }
      }
    });
    let obj = {a:1,b:2}
    for(const key in obj){
        console.log(obj[key],key)
    }
  </script>
</body>
</html>